<html>

<head>
  <meta charset="utf-8" />
  <title>MD2Card</title>
</head>

<body>
  <div style="width: 750px; margin: auto;">
    <section class="js-preview card markdown-body card-notebook wechat"
      style="line-height: 1.75; color: #24292e; background-color: #fff; font-size: 16px; word-wrap: break-word; width: 100%; max-width: 500px; background: #f5f5f5; padding: 35px 25px 25px; font-family: 'PingFang SC', sans-serif; position: relative; overflow: hidden;">
      <section class="card-content"
        style="font-size: 16px; position: relative; background: #fff; color: #34495e; border: 1px solid #ddd; padding: 16px; background-image: linear-gradient(#eee 1px, transparent 1px); background-size: 100% 24px; height: auto;">
        <section class="card-content-inner" style="position: relative; z-index: 1;">
          <blockquote
            style="background-color: #f8f9fa; border-left: 4px solid #3498db; color: #7f8c8d; padding: 10px 20px; margin: 20px 0; font-style: italic; position: relative;">
            <span
              style="height: 1px; transform: translate(0px, -16px); display: block; font-size: 40px; color: rgba(52, 152, 219, 0.2); font-family: Georgia, serif;">“</span>
            <p
              style="margin-top: 0; color: #34495e; font-size: 15px; line-height: 24px; margin: 16px 0; position: relative; z-index: 1;">
              {{weiyu}}🌟</p>
          </blockquote>
          <p
            style="margin-top: 0; color: #34495e; font-size: 15px; line-height: 24px; position: relative; z-index: 1; margin: 16px 0;">
            <img src="{{head_image}}" alt
              style="display: block; max-width: 100%; border: 1px solid #ecf0f1; border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); margin: 20px 0; padding: 5px; background: white; width: auto; height: auto;">
          </p>
          <ol style="list-style: none; counter-reset: item; padding-left: 0px; margin: 20px 0;">
            {% for item in news %}
            <li data-index="{{ loop.index }}"
              style="position: relative; counter-increment: item; list-style: none; margin-bottom: 10px; color: #34495e; line-height: 24px; font-size: 15px; display: flex; align-items: flex-start;">
              <span
                style="width: 24px; height: 24px; border-radius: 50%; border: 1px solid #3498db; background: #f8f9fa; color: #3498db; text-align: center; line-height: 22px; font-weight: bold; margin-right: 10px; flex-shrink: 0;">{{ loop.index }}</span>
              <section>{{ item }}</section>
            </li>
            {% endfor %}
          </ol>
        </section>
      </section><span
        style="position: absolute; top: 0px; left: 10px; font-size: 24px; transform: rotate(-10deg);">📒</span>
    </section>
  </div>
</body>

</html>